<template>
	<z-paging
		ref="paging"
		:refresher-out-rate="0.8"
		:show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据"
		bg-color="#F9FAFC "
		v-model="dataList"
		@query="queryList"
	>
		<view class="box">
			<view class="flex_wrap row_around row_middle">
				<view>
					<u-text
						text="剩余余额(元)"
						size="28rpx"
						color="#fff"
						align="center"
						margin="0 0 24rpx"
					/>
					<u-text
						:text="formatDecimal(numDiv(balance, 100)) || '0.00'"
						size="60rpx"
						color="#fff"
						bold
						align="center"
					/>
				</view>
				<view class="">
					<u-line direction="col" length="97rpx"></u-line>
				</view>
				<view>
					<u-text
						text="信用额度(元)"
						size="28rpx"
						color="#fff"
						align="center"
						margin="0 0 24rpx"
					/>
					<u-text
						:text="formatDecimal(numDiv(lineOfCredit, 100)) || '0.00'"
						size="60rpx"
						color="#fff"
						bold
						align="center"
					/>
				</view>
			</view>
			<view class="fund_details">
				<view class="flex_wrap row_between">
					<u-icon
						name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/eb7f295d7abd4be29c405f4ab5a77d00.png"
						size="48rpx"
						label="资金明细"
						labelSize="32rpx"
						labelColor="#333"
						space="6rpx"
					/>
					<u-icon
						labelPos="left"
						name="arrow-right"
						size="28rpx"
						label="全部"
						labelSize="28rpx"
						labelColor="#777"
						space="6rpx"
						@click="to_funds()"
					/>
				</view>
				<u-gap
					height="15"
					bgColor="#fff"
				/>
				<view
					class="fundList"
					v-for="(item, index) in list"
				>
					<view class="flex_wrap row_between">
						<u-text
							:text="item.remark"
							size="28rpx"
							color="#3D3D3D"
						/>
						<u-text
							:text="item.transactionType == 0 ? '+' + formatDecimal(numDiv(item.transactionAmount, 100)) : '-' + formatDecimal(numDiv(item.transactionAmount, 100))"
							size="28rpx"
							:color="item.transactionType == 0 ? '#18C195' : '#3D3D3D'"
							align="right"
						/>
					</view>
					<u-text
						margin="14rpx 0 0"
						:text="item.createTime"
						size="24rpx"
						color="#777"
					/>
				</view>
			</view>

			<view class="fund_details products_details">
				<view class="flex_wrap row_between">
					<u-icon
						name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/ff92a12dfcd747e099f480dab9938136.png"
						size="48rpx"
						label="优选产品"
						labelSize="32rpx"
						labelColor="#333"
						space="6rpx"
					/>
					<u-icon
						labelPos="left"
						name="arrow-right"
						size="28rpx"
						label="全部"
						labelSize="28rpx"
						labelColor="#777"
						space="6rpx"
						@click="to_products()"
					/>
				</view>
				<u-gap
					height="15"
					bgColor="#fff"
				/>
				<view
					class="fundList"
					v-for="(item, index) in productslist"
				>
					<view class="flex_wrap">
						<u-image
							height="136rpx"
							width="136rpx"
							:src="item.thumbnail"
							mode="aspectFill"
							radius="8rpx"
						/>
						<view class="products">
							<text class="products_name">{{ item.goodsName }}</text>
							<u-text
								:text="'市场价：￥' + formatDecimal(numDiv(item.price, 100))"
								size="28rpx"
								color="#777"
								decoration="line-through"
								margin="10rpx 0"
							/>
							<u-text
								:text="'￥' + formatDecimal(numDiv(item.channelPriceUnitPrice, 100))"
								size="28rpx"
								color="#FF7B00"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js"
	import { formatDecimal } from "@/utils/index.js"
	import { baseUrl } from "@/config/tendIdConfig"
	export default {
		data() {
			return {
				list: [],
				productslist: [],
				dataList: [1, 2, 3, 4],
				numDiv, //除
				formatDecimal: formatDecimal,
				balance: "",
				lineOfCredit:""
			}
		},
		onLoad(options) {
			console.log(options,'options>')
			this.balance = options.balance
			this.lineOfCredit = options.lineOfCredit
		},
		// onShow() {
		//     this.$refs.paging.reload();
		// },
		methods: {
			to_funds() {
				uni.navigateTo({
					url: `/pages_balance/funds/index`
				})
			},
			to_products() {
				uni.navigateTo({
					url: `/pages_balance/products/index`
				})
			},
			getFundsList(pageNum, pageSize) {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this
				uni.request({
					url: baseUrl + "/customer/balance_log/listBalanceLog",
					method: "POST",
					header: {
						Authorization: token
					},
					data: {
						pageNum,
						pageSize
					},
					success(res) {
						if ([991, 992, 401].includes(res.data.code)) {
							uni.$u.toast(res.data.msg)
							that.$store.commit("SET_LOGOUT")
							uni.navigateTo({
								url: "/pages/user/phone/indexApp"
							})
							return
						}
						const result = res.data.data.rows ?? []
						that.list = result
						console.log(that.list, "that.list")
					}
				})
			},
			getProductsList(pageNum, pageSize) {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this
				uni.request({
					url: baseUrl + "/customer/channel_price/listChannelPrice",
					method: "POST",
					header: {
						Authorization: token
					},
					data: {
						pageNum,
						pageSize
					},
					success(res) {
						if ([991, 992, 401].includes(res.data.code)) {
							uni.$u.toast(res.data.msg)
							that.$store.commit("SET_LOGOUT")
							uni.navigateTo({
								url: "/pages/user/phone/indexApp"
							})
							return
						}
						const productsresult = res.data.data.rows ?? []
						that.productslist = productsresult
					}
				})
			},
			queryList(pageNum, pageSize) {
				this.getFundsList(1, 5)
				this.getProductsList(1, 4)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/dbfe7e5149104c7fb735a5adf8270da8.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 60rpx 28rpx 0;
	}

	.fund_details {
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 48rpx;
		padding: 32rpx 28rpx 28rpx;
	}

	.products_details {
		margin-top: 28rpx;
	}

	.fundList {
		border-top: 1rpx solid #d8d8d8;
		padding: 28rpx 0;
	}

	.products {
		margin-left: 18rpx;
	}

	.products_name {
		width: 480rpx;
		display: block;
		color: #3d3d3d;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
</style>

